<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线分析 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span>异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="qd-display.html" class="nav-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item">
                    <i class="fas fa-project-diagram"></i>
                    <span>系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item">
                    <i class="fas fa-database"></i>
                    <span>数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item">
                    <i class="fas fa-cogs"></i>
                    <span>模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item">
                    <i class="fas fa-desktop"></i>
                    <span>用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item">
                    <i class="fas fa-flask"></i>
                    <span>收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item">
                    <i class="fas fa-eye"></i>
                    <span>关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item active">
                    <i class="fas fa-chart-bar"></i>
                    <span>在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item">
                    <i class="fas fa-info-circle"></i>
                    <span>模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item">
                    <i class="fas fa-book"></i>
                    <span>技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span>管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>在线分析</h1>
                    <p>异烟酸生产过程数据深度分析与可视化</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 顶部导航链接 -->
                <div class="navigation-links">
                    <a href="yield-prediction.html" class="nav-link">收率预测</a>
                    <a href="parameter-monitoring.html" class="nav-link">关键参数监控</a>
                    <a href="online-analysis.html" class="nav-link active">在线分析</a>
                    <a href="yield-forecast.html" class="nav-link">预警信息</a>
                </div>

                <!-- 分析工具选择器 -->
                <div class="analysis-tools">
                    <div class="tool-selector">
                        <div class="tool-item active">
                            <i class="fas fa-chart-line"></i>
                            <span>趋势分析</span>
                        </div>
                        <div class="tool-item">
                            <i class="fas fa-chart-pie"></i>
                            <span>相关性分析</span>
                        </div>
                        <div class="tool-item">
                            <i class="fas fa-chart-area"></i>
                            <span>分布分析</span>
                        </div>
                        <div class="tool-item">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span>异常检测</span>
                        </div>
                        <div class="tool-item">
                            <i class="fas fa-code-branch"></i>
                            <span>工艺对比</span>
                        </div>
                        <div class="tool-item">
                            <i class="fas fa-file-export"></i>
                            <span>导出报告</span>
                        </div>
                    </div>
                </div>

                <!-- 页面内容 -->
                <div class="page-content">
                    <!-- 数据选择区域 -->
                    <div class="section-title">数据选择</div>
                    
                    <div class="data-selection-panel">
                        <div class="selection-row">
                            <div class="selection-group">
                                <label>时间范围</label>
                                <div class="selection-controls">
                                    <select class="form-control">
                                        <option>最近24小时</option>
                                        <option>最近7天</option>
                                        <option>最近30天</option>
                                        <option>自定义范围</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="selection-group">
                                <label>批次选择</label>
                                <div class="selection-controls">
                                    <select class="form-control">
                                        <option>当前批次 (B-2023112501)</option>
                                        <option>B-2023112401</option>
                                        <option>B-2023112301</option>
                                        <option>多批次对比</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="selection-group">
                                <label>数据粒度</label>
                                <div class="selection-controls">
                                    <select class="form-control">
                                        <option>原始数据</option>
                                        <option>分钟平均</option>
                                        <option>小时平均</option>
                                        <option>日平均</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="selection-row">
                            <div class="selection-group wide">
                                <label>参数选择</label>
                                <div class="selection-controls tags-container">
                                    <span class="tag selected">反应釜温度 <i class="fas fa-times"></i></span>
                                    <span class="tag selected">系统压力 <i class="fas fa-times"></i></span>
                                    <span class="tag selected">搅拌速度 <i class="fas fa-times"></i></span>
                                    <span class="tag">pH值 <i class="fas fa-plus"></i></span>
                                    <span class="tag">催化剂活性 <i class="fas fa-plus"></i></span>
                                    <span class="tag">进料流量 <i class="fas fa-plus"></i></span>
                                    <span class="tag">原料纯度 <i class="fas fa-plus"></i></span>
                                    <span class="tag add-new">+ 添加参数</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="selection-actions">
                            <button class="btn btn-primary">
                                <i class="fas fa-chart-line mr-2"></i> 生成分析
                            </button>
                            <button class="btn btn-secondary">
                                <i class="fas fa-save mr-2"></i> 保存配置
                            </button>
                        </div>
                    </div>
                    
                    <!-- 趋势分析结果 -->
                    <div class="section-title">趋势分析</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-chart-line"></i>
                            参数趋势对比
                        </div>
                        
                        <div class="analysis-chart">
                            <img src="https://via.placeholder.com/1000x400?text=参数趋势对比图" alt="参数趋势对比图" style="width: 100%; height: auto; border-radius: var(--radius); margin-top: 20px;">
                        </div>
                        
                        <div class="chart-legend">
                            <div class="legend-item">
                                <span class="legend-color" style="background-color: #3498db;"></span>
                                <span class="legend-label">反应釜温度 (°C)</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color" style="background-color: #e74c3c;"></span>
                                <span class="legend-label">系统压力 (MPa)</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color" style="background-color: #2ecc71;"></span>
                                <span class="legend-label">搅拌速度 (rpm)</span>
                            </div>
                        </div>
                        
                        <div class="analysis-insights">
                            <div class="insight-title">
                                <i class="fas fa-lightbulb"></i>
                                数据洞察
                            </div>
                            <ul class="insights-list">
                                <li>
                                    <span class="insight-highlight">温度波动与压力变化</span>：
                                    在 14:30-15:45 时段，温度上升 2.3°C 的同时，系统压力也随之上升了 0.3 MPa，表明两者存在正相关关系。
                                </li>
                                <li>
                                    <span class="insight-highlight">搅拌速度调整效果</span>：
                                    在 16:20 搅拌速度从 170 rpm 提升至 180 rpm 后，温度均匀性提高了约 15%，波动范围从 ±1.2°C 降至 ±0.8°C。
                                </li>
                                <li>
                                    <span class="insight-highlight">异常点检测</span>：
                                    在 18:05 处检测到系统压力异常峰值 (3.1 MPa)，持续时间约 3 分钟，可能与进料泵短暂故障有关。
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 相关性分析 -->
                    <div class="section-title">相关性分析</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-chart-pie"></i>
                            参数相关性热力图
                        </div>
                        
                        <div class="analysis-chart">
                            <img src="https://via.placeholder.com/1000x400?text=参数相关性热力图" alt="参数相关性热力图" style="width: 100%; height: auto; border-radius: var(--radius); margin-top: 20px;">
                        </div>
                        
                        <div class="correlation-table">
                            <table class="performance-table">
                                <thead>
                                    <tr>
                                        <th>参数对</th>
                                        <th>相关系数</th>
                                        <th>关系强度</th>
                                        <th>显著性</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>反应釜温度 - 系统压力</td>
                                        <td>0.82</td>
                                        <td><span class="status-high">强相关</span></td>
                                        <td>p < 0.001</td>
                                    </tr>
                                    <tr>
                                        <td>反应釜温度 - 搅拌速度</td>
                                        <td>0.31</td>
                                        <td><span class="status-medium">中等相关</span></td>
                                        <td>p < 0.05</td>
                                    </tr>
                                    <tr>
                                        <td>系统压力 - 搅拌速度</td>
                                        <td>0.17</td>
                                        <td><span class="status-low">弱相关</span></td>
                                        <td>p = 0.124</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="analysis-insights">
                            <div class="insight-title">
                                <i class="fas fa-lightbulb"></i>
                                相关性洞察
                            </div>
                            <ul class="insights-list">
                                <li>
                                    <span class="insight-highlight">温度与压力强相关</span>：
                                    反应釜温度与系统压力呈现显著正相关 (r = 0.82)，这符合气体热力学定律，在密闭系统中温度升高导致压力增加。
                                </li>
                                <li>
                                    <span class="insight-highlight">搅拌对温度的影响</span>：
                                    搅拌速度与温度呈现中等相关性 (r = 0.31)，表明适当增加搅拌有助于温度均匀分布，但影响有限。
                                </li>
                                <li>
                                    <span class="insight-highlight">优化建议</span>：
                                    基于相关性分析，建议优先控制反应釜温度在 138±1°C 范围内，这将有助于稳定系统压力，从而提高收率稳定性。
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 数据导出选项 -->
                    <div class="section-title">数据导出</div>
                    
                    <div class="export-options">
                        <div class="export-option-card">
                            <div class="export-icon">
                                <i class="fas fa-file-excel"></i>
                            </div>
                            <div class="export-details">
                                <h4>Excel 报表</h4>
                                <p>导出完整数据集与分析结果为 Excel 格式</p>
                            </div>
                            <button class="btn btn-sm btn-secondary">导出</button>
                        </div>
                        
                        <div class="export-option-card">
                            <div class="export-icon">
                                <i class="fas fa-file-pdf"></i>
                            </div>
                            <div class="export-details">
                                <h4>PDF 报告</h4>
                                <p>生成包含图表和洞察的完整分析报告</p>
                            </div>
                            <button class="btn btn-sm btn-secondary">导出</button>
                        </div>
                        
                        <div class="export-option-card">
                            <div class="export-icon">
                                <i class="fas fa-file-csv"></i>
                            </div>
                            <div class="export-details">
                                <h4>CSV 数据</h4>
                                <p>导出原始数据为 CSV 格式</p>
                            </div>
                            <button class="btn btn-sm btn-secondary">导出</button>
                        </div>
                        
                        <div class="export-option-card">
                            <div class="export-icon">
                                <i class="fas fa-image"></i>
                            </div>
                            <div class="export-details">
                                <h4>图表图像</h4>
                                <p>将分析图表导出为高分辨率图像</p>
                            </div>
                            <button class="btn btn-sm btn-secondary">导出</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/common.js"></script>
    <script src="scripts/main-nav.js"></script>
    
    <style>
        /* 在线分析页面特有样式 */
        .analysis-tools {
            background-color: #fff;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .tool-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .tool-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 80px;
            background-color: var(--light);
            border-radius: var(--radius);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .tool-item:hover {
            background-color: var(--light-hover);
            transform: translateY(-3px);
        }
        
        .tool-item.active {
            background: var(--primary-gradient);
            color: white;
            box-shadow: var(--shadow-sm);
        }
        
        .tool-item i {
            font-size: 24px;
            margin-bottom: 8px;
        }
        
        .tool-item span {
            font-size: 12px;
            font-weight: 500;
        }
        
        .data-selection-panel {
            background-color: #fff;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .selection-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .selection-group {
            flex: 1;
            min-width: 200px;
        }
        
        .selection-group.wide {
            flex: 100%;
        }
        
        .selection-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--gray);
            margin-bottom: 8px;
        }
        
        .selection-controls {
            width: 100%;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 14px;
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .tag {
            display: inline-flex;
            align-items: center;
            padding: 5px 10px;
            background-color: var(--light);
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .tag i {
            margin-left: 5px;
            font-size: 10px;
        }
        
        .tag:hover {
            background-color: var(--light-hover);
        }
        
        .tag.selected {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .tag.add-new {
            border: 1px dashed var(--border);
            background-color: transparent;
        }
        
        .selection-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .chart-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
        }
        
        .legend-color {
            width: 15px;
            height: 15px;
            border-radius: 3px;
            margin-right: 8px;
        }
        
        .legend-label {
            font-size: 14px;
            color: var(--gray);
        }
        
        .analysis-insights {
            margin-top: 20px;
            background-color: var(--light);
            border-radius: var(--radius);
            padding: 15px;
        }
        
        .insight-title {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 10px;
        }
        
        .insight-title i {
            color: var(--warning);
            margin-right: 8px;
        }
        
        .insights-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .insights-list li {
            margin-bottom: 10px;
            padding-left: 15px;
            position: relative;
            line-height: 1.5;
        }
        
        .insights-list li:before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--primary);
        }
        
        .insight-highlight {
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .correlation-table {
            margin: 20px 0;
        }
        
        .status-high {
            color: #e74c3c;
            font-weight: 500;
        }
        
        .status-medium {
            color: #f39c12;
            font-weight: 500;
        }
        
        .status-low {
            color: #3498db;
            font-weight: 500;
        }
        
        .export-options {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .export-option-card {
            background-color: #fff;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 15px;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }
        
        .export-option-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }
        
        .export-icon {
            width: 40px;
            height: 40px;
            background-color: var(--light);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
            color: var(--primary);
        }
        
        .export-details {
            flex: 1;
        }
        
        .export-details h4 {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 5px 0;
            color: var(--primary-dark);
        }
        
        .export-details p {
            font-size: 12px;
            color: var(--gray);
            margin: 0;
        }
        
        @media (max-width: 768px) {
            .tool-selector {
                justify-content: center;
            }
            
            .selection-row {
                flex-direction: column;
                gap: 15px;
            }
            
            .selection-group {
                width: 100%;
            }
            
            .export-options {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html> 